<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="searchSubjectList()"
          type="primary"
          size="small"
        >查询结果</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="对账状态：">
            <el-select v-model="listQuery.status">
                <!-- <el-option :value="1" label="全部"></el-option> -->
                <el-option :value="0" label="未对账"></el-option>
                <el-option :value="1" label="已对账"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字：">
            <el-input style="width: 203px" v-model="listQuery.kw" placeholder="请输入管理员姓名"></el-input>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
            v-model="listQuery.dtime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <!-- <el-button class="btn-add" @click="addSubject()" size="mini">添加</el-button> -->
    </el-card>
    <div class="table-container">
      <el-table
        ref="subjectTable"
        :data="list"
        style="width: 100%"
        
        v-loading="listLoading"
        border
      >
        <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->

        <el-table-column label="编号" align="center" width="120" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="后台管理员" align="center" width="120" show-overflow-tooltip  v-if="storeId <= 0">
          <template slot-scope="scope">{{scope.row.verifyBy}}</template>
        </el-table-column>
        <el-table-column label="科技馆名称" align="center" width="120" v-if="storeId <= 0" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.storeName}}</template>
        </el-table-column>
        <el-table-column label="对账状态" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.status == 0 ? '未对账' : '已对账'}}</template>
        </el-table-column>
        <el-table-column label="对账总金额" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.amount}}</template>
        </el-table-column>        
        <el-table-column label="转账状态" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.verifyStatus == 0 ? '未转账' : '已转账'}}</template>
        </el-table-column>
        <el-table-column label="备注" align="center" width="200" show-overflow-tooltip v-if="storeId <= 0">
          <template slot-scope="scope">{{scope.row.remark}}</template>
        </el-table-column>
        <el-table-column label="备注" align="center" width="200" show-overflow-tooltip v-if="storeId > 0">
          <template slot-scope="scope">{{scope.row.remarkStore}}</template>
        </el-table-column>
        <el-table-column label="操作人员" align="center" width="200" show-overflow-tooltip  v-if="storeId > 0">
            <template slot-scope="scope">{{scope.row.updateBy}}</template>
        </el-table-column>
        <el-table-column label="对账日期" align="center" width="250" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.updateTime | formatCreateTime}}</template>
        </el-table-column>

        <!-- <el-table-column label="操作" align="center" fixed="right" width="170"> -->
        <el-table-column label="操作" align="center" fixed="right" width="400">
          <template slot-scope="scope">
              <el-button size="mini" @click="showDD(scope.row)" type="primary">查看订单</el-button>
              <el-button size="mini" @click="showSH(scope.row)" type="primary">售后订单</el-button>
            <el-button size="mini" @click="showDZ(scope.row)" v-if="storeId <= 0 && scope.row.status == 1 && scope.row.verifyStatus == 0">确认转账</el-button>
            <el-button size="mini" @click="showKJG(scope.row)" v-if="storeId >0 && scope.row.status == 0">对账</el-button>
            <el-button size="mini" type="danger" @click="showRemark(scope.row)">备注</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


<el-dialog title="填写备注" :visible.sync="dialogRemark">
  <el-form :model="form1">
    <el-form-item label="备注" label-width="100px">
      <el-input v-model="form1.remark" type="textarea" :rows="4" v-if="storeId <= 0"></el-input>
      <el-input v-model="form1.remarkStore" type="textarea" :rows="4" v-else></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogRemark = false">取 消</el-button>
    <el-button type="primary" @click="edits('remark')" v-if="storeId <= 0">确 定</el-button>
    <el-button type="primary" @click="edits('remarkStore')" v-else>确 定</el-button>
  </div>
</el-dialog>
<el-dialog title="修改转账状态" :visible.sync="dialogDZ">
  <el-form :model="form1">
    <el-form-item label="转账状态" label-width="100px">
        <el-radio v-model="form1.verifyStatus" :label="0">未转账</el-radio>
        <el-radio v-model="form1.verifyStatus" :label="1">已转账</el-radio>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogDZ = false">取 消</el-button>
    <el-button type="primary" @click="edits('verifyStatus')">确 定</el-button>
  </div>
</el-dialog>
<el-dialog title="修改对账状态" :visible.sync="dialogKJG">
  <el-form :model="form1">
    <el-form-item label="对账状态" label-width="100px">
        <el-radio v-model="form1.status" :label="0">拒绝</el-radio>
        <el-radio v-model="form1.status" :label="1">确认</el-radio>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogKJG = false">取 消</el-button>
    <el-button type="primary" @click="edits('status')">确 定</el-button>
  </div>
</el-dialog>

<el-dialog title="查看订单" :visible.sync="dialogDD">
  <el-table :data="gridData" border height="300">
    <el-table-column property="id" label="ID"></el-table-column>
    <el-table-column property="isDZ" label="是否对账">
        <template slot-scope="scope">
            {{scope.row.isDZ == 0 ? '未对账': '已对账'}}
        </template>
    </el-table-column>
    <el-table-column property="orderSn" label="订单编号" show-overflow-tooltip>
        <template slot-scope="scope">
            <span class="tds" @click="toPath(scope.row)">{{scope.row.orderSn}}</span>
        </template>
    </el-table-column>
    <el-table-column property="totalAmount" label="订单总金额" width="120" show-overflow-tooltip></el-table-column>
    <el-table-column property="payAmount" label="实际支付金额" width="120" show-overflow-tooltip></el-table-column>
    <el-table-column property="freightAmount" label="邮费" show-overflow-tooltip></el-table-column>
    <el-table-column property="createTime" label="下单时间" show-overflow-tooltip>
        <template slot-scope="scope">
            {{scope.row.createTime | formatCreateTime}}
        </template>
    </el-table-column>
  </el-table>
</el-dialog>
<el-dialog title="售后订单" :visible.sync="dialogSH">
  <el-table :data="gridData_sh" border height="300">
    <el-table-column property="id" label="ID">
        <template slot-scope="scope">
            <span class="tds" @click="toSH(scope.row)">{{scope.row.id}}</span>
        </template>
    </el-table-column>
    <el-table-column property="isDZ" label="是否对账">
        <template slot-scope="scope">
            {{scope.row.isDZ == 0 ? '未对账': '已对账'}}
        </template>
    </el-table-column>
    <el-table-column property="createTime" label="申请时间" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
            <span>{{scope.row.createTime | formatCreateTime}}</span>
        </template>
    </el-table-column>
    <el-table-column property="memberUsername" label="用户账号" width="120" show-overflow-tooltip></el-table-column>
    <el-table-column property="returnAmount" label="退款金额" width="120" show-overflow-tooltip></el-table-column>
    <el-table-column property="status" label="处理状态" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
            <span>{{scope.row.status | formatStatus}}</span>
        </template>
    </el-table-column>
    <el-table-column label="售后类型" width="180" align="center">
        <template slot-scope="scope">{{
        scope.row.type | formatType
        }}</template>
    </el-table-column>
    <!-- <el-table-column property="freightAmount" label="订单状态" show-overflow-tooltip></el-table-column> -->
    <el-table-column property="handleMan" label="处理人员" width="120" show-overflow-tooltip></el-table-column>
    <el-table-column property="createTime" label="处理时间" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
            <span>{{scope.row.handleTime | formatCreateTime}}</span>
        </template>
    </el-table-column>
  </el-table>
</el-dialog>
    <div class="batch-operate-container"></div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,50]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { formatDate } from "@/utils/date";
import {
    cwList, cwEdit, shList
} from "@/api/finance/api";
import {
    fetchList
} from "@/api/order";
const defaultStatusOptions = [
  {
    label: "待处理",
    value: 0,
  },
  {
    label: "处理中",
    value: 1,
  },
  {
    label: "已完成",
    value: 2,
  },
  {
    label: "已拒绝",
    value: 3,
  },
];
const defaultTypeOptions = [
  {
    label: "换货",
    value: 0,
  },
  {
    label: "仅退款",
    value: 1,
  },
  {
    label: "退货退款",
    value: 2,
  },
];
export default {
  name: "subjectList",
  data() {
    return {
      form1: {
          remark: '',
          status: 0,
          verifyStatus: 0,
          remarkStore: ''
      },
      gridData: [],
      gridData_sh: [],
      operateType: null,
      listQuery: {
        keyword: null,
        type: 3,
        pageNum: 1,
        pageSize: 10,
      },
      list: null,
      total: null,
      listLoading: true,
      multipleSelection: [],
      dialogRemark: false,
      curId: '',
      dialogDZ: false,
      dialogDD: false,
      dialogSH: false,
      dialogKJG: false,
      storeId: null,
    };
  },
  created() {
    this.getList();
    this.storeId = this.$store.state.user.storeId;
  },
  filters: {
    formatCreateTime(time) {
      if(time){
        let date = new Date(time);
        return formatDate(date, "yyyy-MM-dd hh:mm:ss");
      }
    },

    formatStatus(value) {
      if (value === 1) {
        return "未开始";
      } else if (value === 2) {
        return "活动中";
      } else if (value === 3) {
        return "已结束";
      } else if (value === 4) {
        return "已失效";
      }
    },
    formatStatus(status) {
      for (let i = 0; i < defaultStatusOptions.length; i++) {
        if (status === defaultStatusOptions[i].value) {
          return defaultStatusOptions[i].label;
        }
      }
    },
    formatType(status) {
      for (let i = 0; i < defaultTypeOptions.length; i++) {
        if (status === defaultTypeOptions[i].value) {
          return defaultTypeOptions[i].label;
        }
      }
    },
  },
  methods: {
    showDD (row) {
        this.dialogDD = true
        fetchList({
            pageNum:1,
            pageSize:10000,
            status: 3,
            storeId: row.storeId
        }).then(res => {
            console.log(res, 999)
            res.data.records.map(v => {
                v.idDZ = row.status
            })
            this.gridData = res.data.records
        })
    },
    showSH (row) {
        this.dialogSH = true
        shList({
            pageNum:1,
            pageSize:10000,
            status: 2,
            storeId: row.storeId
        }).then(res => {
            console.log(res, 777)
            // res.data.records.map(v => {
            //     v.idDZ = row.status
            // })
            this.gridData_sh = res.data.records
        })
    },
    toPath (row) {
        this.$router.push({ path: "/oms/orderDetail", query: { id: row.id } });
    },
    toSH (row) {
      this.$router.push({
        path: "/oms/returnApplyDetail",
        query: { id: row.id },
      });
    },
    edits (type) {
        console.log(this.form1[type])
        // if (type == 'remark' && this.form1[type] == '') {
        //     this.$message.error('验证失败')
        //     return false
        // }
        let p = {
            id: this.curId
        }
        p[type] = this.form1[type]
        cwEdit(this.curId, p).then(res => {
            this.$message.success('操作成功')
            this.getList()
            this.dialogRemark = false
            this.dialogDZ = false
            this.dialogKJG = false
        })
    },
    showRemark (row) {
        this.dialogRemark = true
        this.curId = row.id
    },
    showDZ (row) {
        this.dialogDZ = true
        this.curId = row.id
    },
    showKJG (row) {
        this.dialogKJG = true
        this.curId = row.id
    },
    getList() {
      this.listLoading = true;
      cwList(this.listQuery).then((response) => {
        this.listLoading = false;
        this.list = response.data.records;
        this.total = response.data.total;
        this.totalPage = response.data.pages;
        this.pageSize = response.data.size;
      });
    },
    handleRecomChange(index, row) {
      let params = new URLSearchParams();
      params.append("ids", row.id);
      params.append("recommendStatus", row.recommendStatus);
      updateRecommendStatus(params).then((response) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handleShowChange(index, row) {
      let params = new URLSearchParams();
      params.append("ids", row.id);
      params.append("showStatus", row.showStatus);
      updateShowStatus(params).then((response) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleUpdate(index, row) {
      cwEdit(row.id, {
          remark: '测试备注',
          id: row.id
      }).then(res => {
          this.$message.success('操作成功')
          this.getList()
      })
    },
    handleDelete(index, row) {
      this.$confirm("是否要删除该品牌", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteSubject(row.id).then((response) => {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000,
          });
          this.getList();
        });
      });
    },
    getProductList(index, row) {
      console.log(index, row);
    },
    getProductCommentList(index, row) {
      console.log(index, row);
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    searchSubjectList() {
      this.listQuery.pageNum = 1;
      if (this.listQuery.dtime) {
          this.listQuery.startTime = 
          formatDate(this.listQuery.dtime[0], "yyyy-MM-dd hh:mm:ss")
          this.listQuery.endTime = formatDate(this.listQuery.dtime[1], "yyyy-MM-dd hh:mm:ss")
          delete this.listQuery.dtime
      }
      console.log(this.listQuery.beginTime)
      console.log(this.listQuery.endTime)
      this.getList();
    },
    handleBatchOperate() {
      console.log(this.multipleSelection);
      if (this.multipleSelection < 1) {
        this.$message({
          message: "请选择一条记录",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      let showStatus = 0;
      if (this.operateType === "showSubject") {
        showStatus = 1;
      } else if (this.operateType === "hideSubject") {
        showStatus = 0;
      } else {
        this.$message({
          message: "请选择批量操作类型",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      let ids = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id);
      }
      let data = new URLSearchParams();
      data.append("ids", ids);
      data.append("showStatus", showStatus);
      updateShowStatus(data).then((response) => {
        this.getList();
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    addSubject() {
      this.$router.push({ path: "/cms/addSubject" });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.tds{
    text-decoration: underline;
    color:#409EFF;
    cursor: pointer;
}
</style>


